<template>
	<view class="edit-all">
		<view class="avatar" @click="selectAvatar">
			<view class="text">头像</view>
			<image class="image" :src="user==null?'../../static/defaultAvatar.png'
			:user.avatarUrl"/>
		</view>
		<view class="name">
			<view class="text">姓名</view>
			<input class="name-input" v-model="user.name" placeholder-style="color:#F76260" 
			:maxlength="25" placeholder="姓名不能为空"/>
		</view>
		<view class="sex">
			<view class="text">性别</view>
			<picker class="sex-picker" @change="changeSex" :range="sexRange">{{user.sex==0?'男':'女'}}</picker>
		</view>
		<view class="school">
			<picker class="qualification-picker" @change="changeQualification" 
			:range="qualificationRange">{{user.qualification==0?'专科':user.qualification==1?'本科':
			user.qualification==2?'研究生':'博士'}}</picker>
			<picker class="quality-picker" @change="changeQuality"
			:range="qualityRange">{{user.quality==0?'全日制':user.quality==1?'在职':
			'自考'}}</picker>
			<input class="university-input" v-model="user.university" placeholder-style="color:#F76260"
			:maxlength="25" placeholder="学校姓名不能为空"/>
		</view>
		<button class="save-info" @click="save">保存信息</button>
		<button class="out-login" @click="outLogin">退出登入</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:null,
				sexRange:['男','女'],
				qualificationRange:['专科','本科','研究生','博士'],
				qualityRange:['全日制','在职','自考']
			}
		},
		onShow(){
			uni.getStorage({
				key:"user",
				success:(res)=>{
					this.user=res.data
				}
			})
		},
		methods: {
			selectAvatar(){//用户选择头像
				uni.chooseImage({
					count:1,
					success: (res) => {
						uni.getImageInfo({
							src:res.tempFilePaths[0],
							success: (res) => {
								this.user.avatarUrl=res.path
							}
						})
					}
				})
			},
			changeSex(e){//用户选择性别
			    if(this.user.sex!=e.detail.value){
					uni.showModal({
						title:"修改性别提示",
						content:"本平台秉持真实交友原则，每位用户对于自己的生理性别应当如实填写。如经查实您的性别与真实性别不一致，我们有权对您的账号进行封禁处理。当前您有一次修改性别的机会（保存信息后生效），请确定是否修改？",
						success: (res) => {
							if(res.confirm){
								this.user.sex=e.detail.value
							}
						}
					})
				}
			},
			changeQualification(e){//用户选择学历
				this.user.qualification=e.detail.value
			},
			changeQuality(e){
				this.user.quality=e.detail.value
			},
			save(){
				uni.setStorage({
					key:"user",
					data:this.user,
					success: (res) => {
						uni.showToast({
							title:"保存成功",
							position:'top'
						})
					}
				})
			},
			outLogin(){//退出登入
				uni.showModal({
					title:"退出",
					content:"您确定退出当前账号吗？",
					confirmColor:"#ff0000",
					success: (res) => {
						if(res.confirm){//点击确定退出登入
							uni.removeStorage({
								key:"user",
							})
							uni.switchTab({
								url:"/pages/tabBar/myself",
								success: () => {
									uni.showToast({
										title:"退出成功",
										position:'top'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.edit-all{
		.avatar{
			.text{
				position: absolute;
				font-weight: bold;
				left: 5vw;
				top: calc(5vh - 0.5rem);
			}
			.image{
				position: absolute;
				width: 10vw;
				max-width: 10vh;
				height: 10vw;
				max-height: 10vh;
				right: 5vw;
				top: calc(5vh - 5vw);
			}
		}
		.name{
			.text{
				position: absolute;
				left: 5vw;
				top: 0.5rem;
				font-size: smaller;
			}
			.name-input{
				position: absolute;
				width: 50vw;
				top: 1.5rem;
				left: 5vw;
			}
		}
		.sex{
			.text{
				position: absolute;
				left: 5vw;
				top: 0.5rem;
				font-size: smaller;
			}
			.sex-picker{
				position: absolute;
				left: 5vw;
				top: 1.5rem;
			}
		}
		.school{
			.qualification-picker{
				position: absolute;
				left: 5vw;
				top: 0.5rem;
				font-size: smaller;
			}
			.quality-picker{
				position: absolute;
				right: 5vw;
				top: 0.5rem;
				opacity: 0.5;
				font-size: smaller;
			}
			.university-input{
				position: absolute;
				width: 50vw;
				top: 1.5rem;
				left: 5vw;
			}
		}
		.save-info{
			width: 90vw;
			margin-left: 5vw;
			margin-top: 5vh;
			border-radius: 10px;
			background-color: blue;
			color: white;
		}
		.save-info:active{
			background-color: royalblue;
		}
		.out-login{
			width: 90vw;
			margin-left: 5vw;
			margin-top: 5vh;
			border-radius: 10px;
			border: 1px solid red;
			background-color: white;
			color: red;
		}
		.out-login:active{
			background-color: red;
			color: white;
		}
	}
	.edit-all>view{
		position: relative;
		width: 90vw;
		margin-left: 5vw;
		height: 10vh;
		border-bottom: 1px solid gray;
	}
</style>